<template>
    <div id="container"></div>
    <!-- <div id="info" ref="info">
        <div class="info_top">123</div>
    </div> -->
</template>

<script setup>
import dataJson from '@/utils/gg.json'
import { debounce } from '@/utils/debound';
import { ref, onMounted, reactive, defineProps } from 'vue'
// let props = defineProps({
//     markerData: Array,
// })

const getMap = () => {
    //初始化地图对象，加载地图
    var satellite = new AMap.TileLayer.Satellite();
    var roadNet = new AMap.TileLayer.RoadNet();
    // 自定义地图样式
    let map = new AMap.Map("container", {
        viewMode: '3D',
        showLabel: true,
        labelzIndex: 130,
        pitch: 40,
        features: ["bg"],
        // resizeEnable: true,
        center: [113.19724, 34.792472],//地图中心点
        zoom: 14,//地图显示的缩放级别
        layers: [
            // new AMap.TileLayer.RoadNet({ opacity: 0, visible: false },)
            // satellite,
        ],
        zooms: [13, 20],
        // mapStyle: 'amap://styles/macaron',
        // mapStyle: 'amap://styles/macaron',
        mapStyle: 'amap://styles/grey',
        // mapStyle: 'amap://styles/darkblue',//地图的背景颜色
    });

    // getGeoJson(map)
    getMark(map)
    getTWoPolygon(map)
    // getWeather(map)
    outMarker(map)
}

// 地图区域
function getGeoJson(map) {
    var geojsonLayer = new AMap.GeoJSON({
        geoJSON: dataJson,
        getMarker: function (geojson, lnglat) {
            let marker = new AMap.Marker({
                position: lnglat,
                content: `<div style="writing-mode: vertical-lr;
                    text-orientation: mixed;
                    white-space: nowrap;
                    font-size: 16px;
                    color: #fff;">${geojson.properties.XZQMC}</div>`,
                offset: new AMap.Pixel(-10, -20),
                zIndex: 12,
                zooms: [13, 20],
            })
            return marker
        },
        getPolyline: function (geojson, lnglat) {
            return new AMap.Polyline({
                path: lnglat,
                strokeColor: '#000',
                strokeOpacity: 0.8,
                strokeWeight: 1,
                zIndex: 12,
                height: 1000
            })
        },
        getPolygon: function (geojson, lnglat) {
            var area = AMap.GeometryUtil.ringArea(lnglat[0])
            var polygon = new AMap.Polygon({
                path: lnglat,
                fillOpacity: 0.6,// 面积越大透明度越高
                strokeOpacity: 1,
                strokeColor: '#000',
                fillColor: 'transparent',
                strokeWeight: 1,
                strokeStyle: "solid",
                height: 100,
                wallColor: "#96b3b4",
                roofColor: "#4073a8",
                extrusionHeight: 100,
                zIndex: 11
            });

            polygon.on('click', function (e) {
                // 处理点击事件
                const properties = geojson.properties;
            });

            return polygon;
        },

    });
    // map.layers.push(imageLayer);
    map.add(geojsonLayer);
}
function getTWoPolygon(map) {
    let data = dataJson.features
    data.forEach((item, index) => {
        // 设置光照
        var object3Dlayer = new AMap.Object3DLayer();
        map.add(object3Dlayer);
        if (item.geometry.type == 'Polygon') {
            let bonds = item.geometry.coordinates
            var polygon = new AMap.Polygon({
                path: bonds,
                fillOpacity: 0,// 面积越大透明度越高
                strokeOpacity: 0,
                strokeColor: 'red',
                fillColor: 'red',
                strokeWeight: 3,
                strokeStyle: "solid",
                extrusionHeight: 200,
                wallColor: '#92a0a0',
                roofColor: 'transparent',
                zIndex: 12,
            });
            map.add(polygon)
            var prism = new AMap.Object3D.Prism({
                path: bonds[0],
                height: 300,
                color: "#69e7fa"
            });
            prism.transparent = true;

            object3Dlayer.add(prism);

            var wall = new AMap.Object3D.Wall({
                path: bonds[0],
                height: 500,
                color: "#000"
            });
            wall.backOrFront = 'both';
            wall.transparent = true;
            object3Dlayer.add(wall);
            var wallOne = new AMap.Object3D.Wall({
                path: bonds[0],
                height: 400,
                color: "transparent"
            });
            wallOne.backOrFront = 'both';
            wallOne.transparent = true;
            object3Dlayer.add(wallOne);

        }
        // else if(item.geometry.type == "Point"){
        //     let path=item.geometry.coordinates;
        // let marker = new AMap.Marker({
        //         position: path,
        //         content: `<div style="writing-mode: vertical-lr;
        //             text-orientation: mixed;
        //             white-space: nowrap;
        //             font-size: 16px;
        //             color: #fff;">${item.properties.XZQMC}</div>`,
        //         offset: new AMap.Pixel(-10, -20),
        //         zIndex: 16,
        //         zooms: [13, 20],
        //     })
        //     map.add(marker)
        // }
    })
}

//  区域外的遮罩
function outMarker(map) {
    // 创建区域外的遮罩
    const maskPath = [
        [-180, -90],
        [-180, 90],
        [180, 90],
        [180, -90],
    ];
    const maskPolygon = new AMap.Polygon({
        path: maskPath,
        strokeColor: '#000000',
        strokeOpacity: 0.6,
        fillColor: '#000000',
        fillOpacity: 0.5,
        zIndex: 11,
        map: map
    });
}
onMounted(() => {
    getMap()
})

function getMark(map) {

    let lastClickTime = 0
    let data = dataJson.features
    data.forEach(itme => {
     
        if (itme.geometry.type == 'Point') {

      
        let markerLocation = itme.geometry.coordinates
        let prevMarker = null
        if (prevMarker) {
            prevMarker.setIcon(null);
        }

        let newMarker = getIcon(markerLocation)
        // newMarker.setMap(map);
        map.add(newMarker)
        newMarker.on('click', () => {
            const now = Date.now();
            if (now - lastClickTime >= 1000) {
                // 在这里执行点击事件的逻辑
                showTatal(map, newMarker)
                lastClickTime = now;
            }
        });
        // 将新的 Marker 赋值给 prevMarker 变量，以便下次清除使用
        prevMarker = newMarker;
        let newMarkerText = getText(markerLocation, itme)
        // 将新的 Marker 添加到地图上
        // newMarkerText.setMap(map)
        map.add(newMarkerText)
    }
    })
}


// 文本
function getText(position, itme) {
    let newMarkerText = new AMap.Marker({
        position: [position[0], position[1]], // Marker 的经纬度
        content: `<div style="writing-mode: vertical-lr;
                    text-orientation: mixed;
                    white-space: nowrap;
                    font-size: 16px;
                    color: #fff;">${itme.properties.XZQMC}</div>`,// 新的 Marker 图标的 URL
        offset: new AMap.Pixel(-35, -20),
        zIndex: 15,
        bubble: false,//冒泡事件
    });
    return newMarkerText
}
// 图标
function getIcon(position) {
    var icon = new AMap.Icon({
        size: new AMap.Size(50, 50), // 设置图标的宽度和高度
        image: require('@/assets/home/zuobiao.png'),// 图标的图片地址
        imageSize: new AMap.Size(50, 50),
    });
    var newMarker = new AMap.Marker({
        position: [position[0], position[1]], // Marker 的经纬度
        icon: icon, // 新的 Marker 图标的 URL
        offset: new AMap.Pixel(-10, -20),
        zIndex: 15,
        bubble: false,//冒泡事件
    });
    return newMarker
}

// 显示弹窗
let info = ref(null)
const showTatal = (map, marker) => {
    let InfoWindow = new AMap.InfoWindow({
        isCustom: true,  //使用自定义窗体
        content: info.value,
        offset: new AMap.Pixel(16, -30),
        zIndex: 14
    })
    InfoWindow.open(map, marker.getPosition());
}

</script>

<style scoped>
#container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1;
}

#info {
    /* color: #69e7fa; */
    color: rgb(111, 109, 109);
    font-size: 0.2rem;
}
</style>
